//AQI指数分布统计页面
<template>
  <!-- 面包屑导航，展示页面路径 -->
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>AQI空气质量指数级别分布统计</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 显示AQI空气质量指数级别分布统计的标题 -->
  <el-alert
    title="AQI空气质量指数级别分布统计"
    type="success"
    effect="dark"
    :closable="false"
    style="width: 80%; margin: 20px 0"
  />

  <!-- 表格容器，显示AQI指数等级分布统计数据 -->
  <div class="table-box">
    <el-table
      :data="aqiDistributeTotalArr"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
      style="width: 100%"
    >
      <!-- 表格列，显示AQI指数等级 -->
      <el-table-column prop="aqiId" label="AQI指数等级" />
      <!-- 表格列，显示AQI指数等级描述 -->
      <el-table-column prop="aqiExplain" label="AQI指数等级描述" />
      <!-- 表格列，显示AQI指数等级分布统计数量 -->
      <el-table-column prop="total" label="AQI指数等级分布统计" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";

// 注入全局的axios实例，用于发送HTTP请求
const axios = inject("axios");

// 定义响应式数据aquiDistributeTotalArr，用于存储从后端获取的AQI数据
const aqiDistributeTotalArr = ref([]);

// 初始化函数，用于发送请求从后端获取AQI分布统计数据
const init = () => {
  // 发送POST请求到后端API获取数据
  axios
    .post("statistics/listAqiDistributeTotalStatis")
    .then((response) => {
      aqiDistributeTotalArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
// 调用init函数，加载数据
init();
</script>

<style scoped>
/* 表格容器样式 */
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
}
</style>

<!--AQI空气质量指数级别分布统计-->
<!--http://localhost:8080/nepm/statistics/listAqiDistributeTotalStatis-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：aqiDistributeTotalArr.value（通过ref()创建的响应式引用，用于存储从接口获取的AQI分布统计数据）-->

<!--数据渲染方式-->
<!--使用el-table组件渲染表格数据-->
<!--通过:data="aqiDistributeTotalArr"将响应式数组绑定到表格-->
<!--表格包含三列，分别显示：-->
<!--aqiId（AQI指数等级）-->
<!--aqiExplain（AQI指数等级描述）-->
<!--total（AQI指数等级分布统计数量）-->
<!--使用empty-text="无数据"设置当数据为空时的提示文本-->
<!--通过CSS设置了表格容器的宽度和高度（80%宽度，450px高度，带滚动条）-->